<template>
  <div ref="refItem" class="item__wrap">
    <div class="item-content">
      <div v-show="item.status !== 'error'" class="item-content__inner">
        <div class="item-header">
          <div class="item-type flex-center">
            <img
            v-if="modelIconUrl"
            :src="modelIconUrl"
            class="type-icon"
            width="16"
            height="16"
            alt=""
            srcset=""
            />
            <svg-icon
            v-else
            :icon-class="formatModelTypeIcon(item.model || item.model_title || '')"
            class="type-icon"
            />
            <span>{{ item.model }}</span>
          </div>
          <el-select v-if="isTodoApp && isTodo"
            v-model="groupValue"
            placeholder="请选择"
            class="group-select"
            size="mini"
            value-key="clientId">
            <el-option
              v-for="item in groupList"
              :key="item.clientId"
              :label="item.name"
              :value="item.clientId"
              :disabled="item.disabled">
              <i class="color-group" :style="{ backgroundColor: item.color }"></i>
              <i class="name-group ellipsis">{{ item.name }}</i>
            </el-option>
          </el-select>
        </div>
        <div v-if="isTodo">
          <loading theme="light" v-if="['wait', 'chating', 'analysis'].includes(item.status)" class="mt-10" />
          <todo-item :item="item" v-else :groupValue="groupValue"></todo-item>
        </div>
        <div class="item-body" v-else>
          <online-search :item="item" />
          <thought-item v-show="item.target && item.target.thought" :item="item" />
          <loading theme="light" v-show="item.status === 'wait'" class="mt-10" />
          <message-item :content="item.target ? item.target.content || '' : ''" />
        </div>
      </div>
      <item-error :item="item" />
      <item-footer :item="item"/>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatModelTypeIcon } from '@/utils'
import Loading from '@/components/loading/index.vue'
import MessageItem from '../message/index.vue'
import TodoItem from '../message/todo-list.vue'
import OnlineSearch from './online-result.vue'
import ItemFooter from './footer.vue'
import ItemError from './error-tips.vue'
import thoughtItem from '../thought-item.vue'
export default {
  name: '',
  components: {

    ItemFooter,
    ItemError,
    OnlineSearch,
    MessageItem,
    TodoItem,
    Loading,
    thoughtItem
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      groupValue: '',
      chat: this.chatStore
    }
  },
  computed: {
    ...mapGetters(['chatStore', 'appInfo', 'groupList']),
    modelIconUrl () {
      let list = []
      if (this.chatStore.docSummarize.documentModel) {
        list = this.chatStore.documentModels
      } else {
        list = this.chatStore.models
      }
      return list.find(
        (item) =>
          item.model === this.item.model ||
          item.name === this.item.model_title ||
          item.name === this.item.model
      )?.icon
    },
    isTodoApp () {
      return this.appInfo.appID === 111
    },
    isTodo () {
      return this.item.business === '1' || this.item.target?.business === '1'
    }
  },
  methods: {
    formatModelTypeIcon
  }
}
</script>

<style lang="scss" scoped>
/* eslint-disable */
.item__wrap {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  text-align: left;
}
.svg-icon {
  cursor: pointer;
}
.item-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: rgba(78,95,255,0.2);
  border-radius: 8px 8px 8px 0px;
  color: $color-white;
  padding: 15px 20px;
  font-size: 14px;
  min-width: 220px;
}
.item-header {
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: $font-size-base;
  color: rgba($color-white, 0.5);
}
.item-body {
  padding: 0px 0 15px 0;
  font-size: 14px;
  line-height: 1.8;
  min-height: 20px;
  line-height: 20px;
  border-bottom: 1px solid rgba($color-white, 0.1);
}
.item-footer {
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.item-type {
  display: flex;
  .type-icon {
    font-size: 20px;
    margin-right: 8px;
  }
}
.copy-icon {
  cursor: pointer;
}
.group-select{
  /deep/.el-input__inner{
    background-color: rgba(255,255,255,0.05);
    border-color: transparent;
    color: #fff;
  }

}
.color-group{
  display: inline-block;
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: #c6c6c6;
  vertical-align: middle;
}
.name-group {
  display: inline-block;
  max-width: 120px;
  font-style: normal;
}
</style>
